<%@ taglib prefix="fomr" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%--引用标签--%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<%@ include file="/WEB-INF/include/head.basic.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据新增</title>
<script type="text/javascript">
	$(function(){
		menuBean.init();
		if('${message}'!=null && '${message}'!=''){
			//错误提示信息
			$('#tipInfos').addClass('error');
			$('#tipInfos').html('${message}');
		}
	});
	function goMenu(obj,level ,id){
		$('.level'+level+'Color').css("color","blue");
		$('.levelEdit').remove();
		$(obj).css("color","red");
		$.ajax({
			url :'../menuGet',
			type:'get',
			dataType:'json',
			data : {id:id},
			success:function(data){
				if (level<3){
					$('#level'+(level+1)).children().next().next().remove();
					$.each(data,function(currentIndex,element){
						$('#level'+(level+1)).append("<li style='margin-top: 10px;'><a href='##' style='font-size: 20px;color: blue' class='level"+(level+1)+"Color' onclick=\"goMenu(this,"+(level+1)+",'"+element.id+"')\">"+element.name+"</a></li>");
					});
				}
			}
		});
		$('#currentLevel'+level+'Id').val(id);
		$(obj).after("<a href='##' style='margin-left: 10px;font-size: 10px;color: red' class='levelEdit' onclick=\"goEdit('"+id+"')\">编辑</a>");
	}

	function goEdit(id){
		$.ajax({
			url :'../menuEdit',
			type:'get',
			dataType:'json',
			data : {id:id},
			success:function(data){
				$('#name').textbox('setValue',data.name);
				$('#pId').textbox('setValue',data.pId);
				$('#file').textbox('setValue',data.file);
				$('#open').textbox('setValue',data.open);
				$('#icon').textbox('setValue',data.icon);
				$('#sort').textbox('setValue',data.sort);
				$('#isQy').textbox('setValue',data.isQy);
				$('#Vid').val(data.id);
			}
		});
	}

	function newMenu(level){
		$('#name').textbox('setValue',"");
		$('#file').textbox('setValue',"");
		$('#open').textbox('setValue',"");
		$('#icon').textbox('setValue',"");
		$('#sort').textbox('setValue',"");
		$('#isQy').textbox('setValue',"");
		$('#Vid').val("");
		if(level==1){
			$('#pId').textbox('setValue',0);
		}else if(level==2){
			$('#pId').textbox('setValue',$('#currentLevel1Id').val());
		}else if(level==3){
			$('#pId').textbox('setValue',$('#currentLevel2Id').val());
		}
	}
	function delMenu(level){
		var currentId = "";
		if(level==1){
			currentId = $('#currentLevel1Id').val();
		}else if(level==2){
			currentId = $('#currentLevel2Id').val();
		}else if(level==3){
			currentId = $('#currentLevel3Id').val();
		}
		if (currentId == ''){
			$.messager.alert('提示', '请选择菜单！', 'warning');
			return ;
		}
		$.ajax({
			url :'../menuDel?id='+currentId,
			success:function(data){
				$.messager.alert('提示', data, 'warning');
			}
		});
	}
	//表单提交
	function forSave() {
		$("#saveBtn").linkbutton("disable");
		$("#saveForm").submit();
	}
</script>
</head>
<body>
<table align="center" cellpadding="0px" style="border-spacing: 0; width: 1100px">
	<tr>
		<td>
			<div id="p" class="easyui-panel"  style="width:200px;height:500px;padding:10px;">
				<ul style="list-style-type: none;">
					<li style="margin-top: 10px;"><a href="###"  class="easyui-linkbutton" iconCls="icon-save" onclick="newMenu('1')">增加一级菜单</a>&nbsp;&nbsp;<a href="###"  class="easyui-linkbutton" iconCls="icon-save" onclick="delMenu(1)">删除</a></li>
					<li><input type="hidden" id="currentLevel1Id"><hr/></li>
					<c:forEach items="${level1Menus}" var="one">
						<li style="margin-top: 10px;"><a href="##" style="font-size: 20px;color: blue;" class="level1Color" onclick="goMenu(this,1,'${one.id}')">${one.name}</a></li>
					</c:forEach>
				</ul>
			</div>
		</td>
		<td>
			<div id="p1" class="easyui-panel"  style="width:200px;height:500px;padding:10px;">
				<ul style="list-style-type: none;" id="level2">
					<li style="margin-top: 10px;"><a href="###" id="saveBtn1" class="easyui-linkbutton" iconCls="icon-save" onclick="newMenu('2')">增加二级菜单</a>&nbsp;&nbsp;<a href="###"  class="easyui-linkbutton" iconCls="icon-save" onclick="delMenu(2)">删除</a></li>
					<li><input type="hidden" id="currentLevel2Id"><hr/></li>
				</ul>
			</div>
		</td>
		<td>
			<div id="p2" class="easyui-panel"  style="width:200px;height:500px;padding:10px;">
				<ul style="list-style-type: none;" id="level3">
					<li style="margin-top: 10px;"><a href="###" id="saveBtn2" class="easyui-linkbutton" iconCls="icon-save" onclick="newMenu('3')">增加三级菜单</a>&nbsp;&nbsp;<a href="###"  class="easyui-linkbutton" iconCls="icon-save" onclick="delMenu(3)">删除</a></li>
					<li><input type="hidden" id="currentLevel3Id"><hr/></li>
				</ul>
			</div>
		</td>
		<td>
			<form:form action="../menuSave"  id="saveForm" modelAttribute="menu">
				<form:hidden path="id" id="Vid"/>
				<div id="panel">
					<table align="center" cellpadding="10px" style="border-spacing: 0;">
						<tr>
							<td colspan="2"><div id="tipInfos"></div></td>
						</tr>
						<tr>
							<td align="right"><strong>菜单名称：</strong></td>
							<td><form:input path="name" id="name" cssClass="easyui-textbox" style="width:170px"></form:input></td>
						</tr>
						<tr>
							<td align="right"><strong>链接：</strong></td>
							<td><form:input path="file" id="file" cssClass="easyui-textbox" style="width:170px"></form:input></td>
						</tr>
						<tr>
							<td align="right"><strong>父菜单：</strong></td>
							<td><form:input path="pId" id="pId" cssClass="easyui-textbox" data-options="editable:false" style="width:170px"></form:input></td>
						</tr>
						<tr>
							<td align="right"><strong>是否展开(展开：1，关闭：0)：</strong></td>
							<td><fomr:input path="open" id="open" cssClass="easyui-textbox" style="width:170px"></fomr:input></td>
						</tr>
						<tr>
							<td align="right"><strong>图标：</strong></td>
							<td><fomr:input path="icon" id="icon" cssClass="easyui-textbox" style="width:170px"></fomr:input></td>
						</tr>
						<tr>
							<td align="right"><strong>排序：</strong></td>
							<td><fomr:input path="sort" id="sort" cssClass="easyui-textbox" style="width:170px"></fomr:input></td>
						</tr>
						<tr>
							<td align="right"><strong>是否启用(启用：1，关闭：0)：</strong></td>
							<td><fomr:input path="isQy" id="isQy" cssClass="easyui-textbox" style="width:170px"></fomr:input></td>
						</tr>
					</table>
				</div>
				<div id="foot" style="padding:5px;text-align:center ; ">
					<a href="###" id="saveBtn" class="easyui-linkbutton" iconCls="icon-save" onclick="forSave();" >保存菜单</a>&nbsp;&nbsp;&nbsp;
				</div>
			</form:form>
		</td>
	</tr>
</table>
</body>
<script type="application/javascript">
	var menuBean={
		options : {
			title : "菜单管理",
			fit : false,
			iconCls:null,
			footer : "#foot",
			headerCls : "titleCss",
			width:'400px',
			height:'500px',
			padding:'10px'
		},
		init:function(){
			$("#panel").panel(this.options);//设置Panel信息
		}
	};
</script>
</html>